<template>
	<view class="template-home tn-safe-area-inset-bottom" style="background-color: #f1f1f1;">

		<!-- 头部栏 -->
		<tn-sticky>
			<!-- banner -->
			<tn-swiper v-model="curImage" :data="banner" autoplay indicator @item-click="bannerEvent" width="100%"
				:height="proH+'px'" style="border-radius: 5px;">
				<template #default="{ data }">
					<view class="swiper-data">
						<image class="image" :src="sConf.pics + data" mode="scaleToFill" />
					</view>
				</template>
			</tn-swiper>
		</tn-sticky>
		<!--
		<view class="malltHeadBatten" style="padding:  0">
			 :style="{backgroundImage:'url('+ sConf.host + bg +')'}"
			style="background-repeat:no-repeat;background-size: cover;" 		 
			<view :style="'height:'+sConf.tH+'px;'"> </view>
		</view>
		-->
		<!-- 腰部栏位 -->
		<scroll-view scroll-y="true" :style="{height:(sConf.iH - proH) +'px' }">
			<view style="padding: 10px;display: flex;flex-direction: column;gap: 10px;">

				<!-- 横向滚动 
			<tn-scroll-list :indicator="false" style="padding: 10px 0;">
				<view class="item-container" style="padding-top: 10px;">
					<view v-for="i in 20" :key="i" class="scroll-item tn-flex-center tn-flex-column">
						<view class="empty gray"
							style="display: flex;flex-direction: column;justify-content: center;align-items: center;">
							<tn-icon name="loading" size="64" color="#fff"></tn-icon>
						</view>
						<view class="title">占位</view>
					</view>
				</view>
			</tn-scroll-list>
			-->
				<!-- 网格布局 -->
				<view class="card-grid">
					<div class="card"
						style="grid-column: 1 / span 2;grid-row: 1 / span 3;display: flex;gap: 20px; align-items: center;"
						:class="blockClass_0" @click="placeChange(posTop[0]?.url)">
						<view>
							<tn-icon :name="(posTop[0]?.icon || 'fingerprint')" size="80" color="#fff"></tn-icon>
						</view>
						<view style="display: flex;align-items: center; gap: 10px;">
							<view style="display: flex;flex-direction: column;">
								<text class="card-title">{{posTop[0]?.name ?? '暂未开放'}}</text>
								<div class="card-ider"></div>
								<p style="font-size: smaller;">{{posTop[0]?.english ?? 'a'}}</p>
							</view>
						</view>
					</div>
					<div class="card" style="grid-column: 1 / span 1;grid-row: 4 / span 3;" :class="blockClass_1"
						@click="placeChange(posTop[1]?.url)">
						<text class="card-title">{{posTop[1]?.name ?? '暂未开放'}}</text>
						<div class="card-ider"></div>
						<p style="font-size: smaller;">{{posTop[1]?.english ?? 'Waiting'}}</p>
						<!-- 图标 -->
						<tn-icon :name="(posTop[1]?.icon ?? 'fingerprint')" size="56"
							style="position: absolute;top: 0;right: 0;padding: 5px;"></tn-icon>
					</div>
					<div class="card" style="grid-column: 2 / span 1;grid-row: 4 / span 3;" :class="blockClass_2"
						@click="placeChange(posTop[2]?.url)">
						<text class="card-title">{{posTop[2]?.name ?? '暂未开放'}}</text>
						<div class="card-ider"></div>
						<p style="font-size: smaller;">{{posTop[2]?.english ?? 'Waiting'}}</p>
						<!-- 图标 -->
						<tn-icon :name="(posTop[2]?.icon ?? 'fingerprint')" size="56"
							style="position: absolute;top: 0;right: 0;padding: 5px;"></tn-icon>
					</div>
					<div class="card" style="grid-column: 3 / span 1; grid-row: 1 / span 4;" :class="blockClass_3"
						@click="placeChange(posTop[3]?.url)">
						<text class="card-title">{{posTop[3]?.name ?? '暂未开放'}}</text>
						<div class="card-ider"></div>
						<p style="font-size: smaller;">{{posTop[3]?.english ?? 'Waiting'}}</p>
					</div>
					<div class="card" style="grid-column: 3 / span 1; grid-row: 5 / span 2;" :class="blockClass_4"
						@click="placeChange(posTop[4]?.url)">
						<text class="card-title">{{posTop[4]?.name ?? '暂未开放'}}</text>
						<div class="card-ider" style="display: none;"></div>
						<p style="font-size: smaller;"></p>
					</div>
				</view>

				<!-- 本地专区 -->
				<template v-for="(item,index) in localData" :key="index">
					<view class="tn-gradient-bg__red-single"
						style="border-radius: 5px;display: flex;flex-direction: column;">
						<view class="" style="display: flex;justify-content: space-between;">
							<view class="tn-orange_bg"
								style="width: 50vw;padding: 3px 10px;display: flex;gap: 5px;align-items: center;border-radius: 5px 0 45px 0;">
								<tn-icon name="location" size="40" color="#fff"></tn-icon>
								<view class="" style="color: #fff;">{{item.name}} </view>
							</view>
							<view class="" style="padding: 10px;color: #fff;"><text @click="navToLocal">更多...</text>
							</view>
						</view>
						<tn-scroll-list :indicator="false" style="padding:5px;">
							<view class="item-container">
								<view v-for="(pud,index) in item.child" :key="index"
									class="scroll-item tn-flex-center tn-flex-column"
									style="background-color: #ffffff33;padding: 5px; border-radius: 5px;"
									@click="navToProduct(pud.id)">
									<view class="empty"
										style="display: flex;flex-direction: column;justify-content: center;align-items: center;">
										<image :src="sConf.pics + (pud.cover ?? [])[0]?.url" mode="widthFix"
											style="width: 96px;"></image>
									</view>
									<view class="textViewShort" style="color: #fff;font-size: small;padding-top: 5px;">
										{{pud.name}}
									</view>
								</view>
							</view>
						</tn-scroll-list>
					</view>
				</template>
			</view>

			<!-- 底部尾 -->
			<view>
				<view class="titleTopBg top-font-title"
					style="display: flex;flex-direction: column;align-items: center;font-size: small;color: #fff;padding: 10px;">
					热销精品
				</view>
				<!-- 瀑布滚动栏 -->
				<scroll-view class="malltSlBlock" scroll-y style="padding: 0 10px;">
					<!-- 公告栏 
				<view v-if="noticeData && showNotice" style="padding: 5px 0;">
					<tn-notice-bar :data="noticeData" direction="vertical" loop bg-color="#fff" left-icon="sound"
						right-icon="close" @right-icon-click="noticeChange"></tn-notice-bar>
				</view>
				-->
					<!-- 瀑布栏 -->
					<tn-water-fall :data="puctData" mode="normal">
						<template #left="{ item }">
							<!-- sub-mallt-block :product="item" @tap="productChange(item.id)"></sub-mallt-block -->
							<sub-product-card :data="item" @puctPlay="EventNavProduct"></sub-product-card>
						</template>
						<template #right="{ item }">
							<!-- sub-mallt-block :product="item" @tap="productChange(item.id)"></sub-mallt-block -->
							<sub-product-card :data="item" @puctPlay="EventNavProduct"></sub-product-card>
						</template>
					</tn-water-fall>
				</scroll-view>
			</view>
			<!-- 顶部自定义导航 -->
			<tn-navbar :placeholder="true" fixed bg-color="#FFFFFF00" text-color="#fff">
				<!--
			<tn-search-box v-model="curSearch" placeholder="请输入搜索内容" shape="square" :border="false"
				:search-button="false" size="sm"
				style="background-color: #f1f1f1;width: 100%;border-radius: 10px;margin: 0 5px;" />
			-->
				<template #back>
					<view style="display: flex;align-items: center;gap: 5px;">
						<tn-icon :name="sConf.logo" size='64' color="#fff" style="margin-left: 5px;"></tn-icon>
						<tn-badge :value="curMsg===0?'':curMsg" type="danger">
							<tn-icon name="notice" size="56" offset-top="-5" @click="userChange"></tn-icon>
						</tn-badge>
					</view>
				</template>
			</tn-navbar>
		</scroll-view>
	</view>

</template>

<script>
	import utils from '@/common/utils';
	export default {
		data() {
			return {
				toTop: 0,
				topH: 0,
				proH: '350', // 比例高度
				title: ' • 匠心传承',
				sConf: getApp().globalData,
				curSearch: '',
				noticeData: null,
				puctData: [],
				showNotice: true,
				curImage: 0,
				curMsg: 0,
				localData: [], // 地方专区	
				blockData: [], // 矩阵配置

				blockClass_0: utils.hasFizzTheme(),
				blockClass_1: utils.hasFizzTheme(),
				blockClass_2: utils.hasFizzTheme(),
				blockClass_3: utils.hasFizzTheme(),
				blockClass_4: utils.hasFizzTheme(),
			}
		},
		mounted() {
			this.proH = Math.ceil(this.sConf.iW / 16 * 9)
		},
		props: {
			bg: {
				type: String,
				default: '/media/background/fashion-bg-min.png'
			},
			banner: {
				type: Array,
				default: ['/media/banner/default.jpeg']
			},
			posTop: {
				type: Array,
				default: [{
					id: 1,
					name: "悦玺严选",
					english: "Strict",
					url: '/pageb/daily/daily',
					icon: "https://cos.yuejunxi.com/media/default/default.png",
					sort: 1
				}, {
					id: 2,
					name: "悦君玺",
					english: "Bustling",
					url: '/pageb/shoped/shoped?pid=2',
					icon: "https://cos.yuejunxi.com/media/default/default.png",
					sort: 2
				}, {
					id: 3,
					name: "悦君玺",
					english: "Bustling",
					url: '/pageb/shoped/shoped?pid=2',
					icon: "https://cos.yuejunxi.com/media/default/default.png",
					sort: 3
				}, {
					id: 4,
					name: "悦玺同城",
					english: "Local City",
					url: '/pagec/local/local',
					icon: "https://cos.yuejunxi.com/media/default/default.png",
					sort: 4
				}, {
					id: 5,
					name: "悦君玺",
					english: "More",
					url: '/pageb/shoped/shoped?pid=2',
					icon: "https://cos.yuejunxi.com/media/default/default.png",
					sort: 5
				}, ]
			}
		},
		methods: {
			bannerEvent(e) {
				console.log('bannerEvent', e);
				this.$emit('navBanner', e)
			},
			loadDefData() {
				console.log('初始化');
				this.designLayout();
				this.loadAiringLaert();
				// this.loadMatrix()
				this.loadShareHot();
				this.LoadLocalList();
			},
			designLayout() {
				console.log('计算窗口布局');
				this.$nextTick(() => {
					const query = uni.createSelectorQuery().in(this);
					query.select('.malltHeadBatten').boundingClientRect();
					query.select('.malltSlBlock').boundingClientRect();
					query.exec((res) => {
						// console.log('mallt窗口', this.sConf.iH, res[0].top, res[1].top);
						this.topH = this.sConf.iH - res[1].top - this.sConf.tH + 10;
					});
				})
			},
			autoScrollTop() {
				console.log('自动滚动');
				uni.navigateTo({
					url: '/pagec/enroll/enroll'
				})
			},
			/**
			 * 扫描
			 */
			toScanChange(e) {
				console.log('toScanChange', e);
				let that = this
				uni.scanCode({
					onlyFromCamera: true,
					success(res) {
						console.log(res);
						uni.showToast({
							title: res
						})
					}
				})
			},
			filterMatrix(e) {
				console.log(this.blockData.length);
				if (this.blockData.length === 0) {
					return null
				} else {
					return this.blockData.find(item => item.sort === e)
				}
			},
			blockNavto(e) {
				let b = this.filterMatrix(e);
				uni.navigateTo({
					url: b.url
				});
			},
			/**
			 * 跳转到购物车
			 * @param {Object} e
			 */
			toCartChange(e) {
				// console.log('toCartChange', e);
				uni.navigateTo({
					url: '/pageb/puctcart/puctcart'
				});
			},
			/**
			 * 跳转到商户
			 */
			placeChange(e) {
				// console.log('placeChange', e);
				uni.navigateTo({
					// url: '/pageb/shoped/shoped?pid=' + e
					url: e
				})
			},
			/**
			 * 跳转到产品页
			 */
			productChange(e) {
				// console.log('productChange');
				uni.navigateTo({
					url: '/pageb/puctplay/puctplay?puct=' + e,
				});
			},
			EventNavProduct(e) {
				uni.navigateTo({
					url: '/pagec/product/product?gid=' + e
				});
			},
			navToProduct(e) {
				uni.navigateTo({
					url: '/pagec/product/product?gid=' + e
				});
			},
			navToLocal() {
				uni.navigateTo({
					url: '/pagec/local/local'
				})
			},
			/**
			 * 每日签到
			 */
			dailyChange() {
				console.log('跳转到签到');
				uni.navigateTo({
					url: '/pageb/daily/daily'
				})
			},
			/**
			 * 查看会员信息
			 */
			vipChange() {
				uni.navigateTo({
					url: '/pagec/member/member'
				})
			},
			/**
			 * 查看权益
			 */
			levelChange() {
				uni.navigateTo({
					url: '/pagec/member/level'
				})
			},
			/**
			 * 兑换中心
			 */
			converChange() {
				uni.navigateTo({
					url: '/pagec/conver/conver'
				})
			},
			noticeChange() {
				console.log('关闭公告栏');
				this.showNotice = !this.showNotice;
			},
			userChange() {
				this.$emit('navUserEvent');
			},
			/**
			 * 随机主题
			 */
			hasFizzTheme() {
				let theme = ['purple', 'gray', 'sunset', 'ocean', 'forest', 'berry', 'midnight', 'autumn', 'mint',
					'lavender', 'coral'
				]
				const idx = Math.floor(Math.random() * theme.length)
				return theme[idx]
			},
			/**
			 * 加载系统公告
			 */
			loadAiringLaert() {
				let host = this.sConf.host + '/weapps/alert/'
				let data = {
					plate: 'app'
				}
				utils.allinpayMethodList(host, data).then((res) => {
					// console.log('加载系统公告', res);
					if (res.rescode === 200) {
						let tmpData = [];
						res.resmsg.forEach((item) => {
							tmpData.push(item.content)
						});
						this.noticeData = tmpData;
					}
				});
			},
			/**
			 * 加载热销商品
			 */
			loadShareHot() {
				let host = this.sConf.host + '/weapps/product/'
				let token = this.sConf.token
				let data = {
					status: 1,
					is_list: 1,
					is_share: 1,
					is_money: 1,
					is_card: 0,
					ordering: '-hot'
				}
				uni.showLoading({
					title: '努力加载中'
				})
				utils.authenticatorOnList(host, token, data).then(res => {
					console.log('加载热销产品', res);
					this.puctData = res
				}).finally(() => {
					uni.hideLoading()
				});
			},
			/**
			 * 加载矩阵配置
			 */
			loadMatrix() {
				let host = this.sConf.host + '/weapps/matrix/'
				let data = {
					ordering: 'sort'
				}
				utils.allinpayMethodList(host, data).then(res => {
					console.log('加载矩阵配置', res);
					this.blockData = res
				});
			},
			/**
			 * 加载地方专区
			 */
			LoadLocalList() {
				let host = this.sConf.host + '/weapps/local/';
				let token = this.sConf.token || ''
				let data = {
					status: 1,
					ordering: '-id'
				}
				utils.authenticatorOnList(host, token, data).then(res => {
					// console.log('加载地方专区', res);
					this.localData = res
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.template-home {
		height: 100%;
		display: flex;
		flex-direction: column;
	}

	/* 头部栏 */
	.malltHeadBatten {
		background: linear-gradient(to bottom, $uni-color-banner, #f1f1f1);
	}

	/* 动态高度 */
	.malltSlBlock {
		width: 100%;
		height: calc(100vh - 320px);
	}

	/* 卡片网格样式 */
	.card-grid {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		grid-template-rows: repeat(6, 1fr);
		gap: 10px;
	}

	/* 卡片网格样式 */
	.card {
		background: white;
		border-radius: 10px;
		padding: 10px 20px;
		color: white;
		position: relative;
		overflow: hidden;
		box-shadow: 0 2px 20px 1px rgba(0, 0, 0, 0.3);
	}

	.card::after {
		content: '';
		position: absolute;
		right: -30px;
		bottom: -30px;
		width: 100px;
		height: 100px;
		border-radius: 50%;
		background: rgba(255, 255, 255, 0.1);
	}

	.card-title {
		// font-size: small;
		font-weight: bold;
	}

	.card-ider {
		width: 80px;
		height: 2px;
		background: rgba(255, 255, 255, 0.5);
		margin: 10px 0;
	}

	/* 卡片颜色变体 */
	.purple {
		background: linear-gradient(135deg, #9c27b0, #673ab7);
	}

	.gray {
		background: linear-gradient(135deg, #607d8b, #455a64);
	}

	.sunset {
		background: linear-gradient(135deg, #ff6b6b, #ffa07a);
	}

	.ocean {
		background: linear-gradient(135deg, #4facfe, #00f2fe);
	}

	.forest {
		background: linear-gradient(135deg, #43a047, #1de9b6);
	}

	.berry {
		background: linear-gradient(135deg, #ff4081, #7b1fa2);
	}

	.midnight {
		background: linear-gradient(135deg, #2c3e50, #3498db);
	}

	.autumn {
		background: linear-gradient(135deg, #ff9a44, #fc6076);
	}

	.mint {
		background: linear-gradient(135deg, #00b09b, #96c93d);
	}

	.lavender {
		background: linear-gradient(135deg, #a18cd1, #fbc2eb);
	}

	.coral {
		background: linear-gradient(135deg, #ff7e5f, #feb47b);
	}

	.titleTopBg {
		background: linear-gradient(to right, #ffffff, #ff7e5f, #ffffff);
	}

	/* banner */
	.swiper-data {
		width: 100%;
		height: 100%;
		border-radius: 5px;

		.image {
			width: 100%;
			height: 100%;
			border-radius: inherit;
		}
	}

	/* 横向滚动 */
	.item-container {
		position: relative;
		width: fit-content;

		display: flex;
		flex-wrap: nowrap;

		.scroll-item {
			flex-grow: 1;
			flex-shrink: 0;
			margin: 0rpx 10rpx;

			.empty {
				width: 96px;
				height: 128px;
				border-radius: 5px;
			}

			.title {
				margin-top: 10rpx;
			}
		}
	}
</style>